<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>


    </head>
    <body>
        <table border="1" width="500">
            <thead>
                <tr>
                    <th>
                        全选
                        <input type="checkbox" id="all">
                    </th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>alice1</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>alice2</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>alice3</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>alice4</td>
                    <td>20</td>
                    <td>女</td>
                </tr>
            </tbody>
        </table>
        <script>

            //获取全选按钮的DOM对象
            var all = document.getElementById("all");
            //获取tbody中的所有的input的集合
            var inputs = document.querySelectorAll("tbody input");
            //给全选按钮绑定事件
            all.onclick = function () {
                if (all.checked) {//判断全选按钮是否被选中
                    for (var i = 0; i < inputs.length; i++) {
                        inputs[i].checked = true;
                    }
                } else {
                    for (var i = 0; i < inputs.length; i++) {
                        inputs[i].checked = false;
                    }
                }
            };

            //给tbody中的每一个复选框绑定事件
            for (var i=0;i<inputs.length;i++){

                inputs[i].onclick=function(){
                    var count=0;//个数
                    //每点击完之后，查找一下tbody中的input有多少个被选中
                    for(var j=0;j<inputs.length;j++){
                        if(inputs[j].checked){
                            count++;
                        }
                    }
                    console.log(count);
                    //被选中的个数和tbody中的复选框的个数相同
                    if(count==inputs.length){
                        all.checked=true;
                    }else{
                        all.checked=false;
                    }
                };
            }


        </script>
    </body>
</html>